<!DOCTYPE html>
 
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Atlas, A Creative/Freelancer's Portfolio</title>
	<link rel="stylesheet" href="css/styles.css">
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script src="js/jquery.ba-hashchange.min.js"></script>
	<script src="js/jquery.quicksand.js"></script>
	<script src="js/script.js"></script>
    <script type="text/javascript">
	$(function(){

        $(".dropbtn").click(function(){
            $("#dropdown").slideToggle("slow");
            $(this).toggleClass("active");
        });
        
        // Bind the event.
        $(window).hashchange( function(){
            // Alerts every time the hash changes!
            // alert( location.hash );
            loadContent(location.hash);
        })
        // Trigger the event (useful on page load).
        $(window).hashchange();
    });
	</script>
</head>

<body>
<div id="dropcontainer">
<div id="dropdown">
	<div class="container">
		<img src="images/logo.png" alt="Atlas" class="logo">
		<h3>Quick Links&#58;</h3>
		<ul>
			<li class="dmenu1"><a href="#">Forrst</a></li>
			<li class="dmenu3"><a href="#">Twitter</a></li>
			<li class="dmenu2"><a href="#">Facebook</a></li>
		</ul>

		<h4>Simply the forefront of your work&#46;&#46;&#46;showcase in style my friend&#46;</h4>
		<img src="images/avatar.jpg" alt="Name here" class="dropavatar">
		
		<h2>Yo&#44; I&#39;m Johnny Doe&#46;</h2>
		
		<p class="dpara1 dparas">Iste natus error sit voluptatem accusantium doloremque laudantium&#44; totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.&#46;Nemo enim ipsam voluptatem quia voluptas sit&#46;</p>
		<p class="dpara2 dparas">Neque porro quisquam est&#44; qui dolorem ipsum quia dolor sit amet&#44; consectetur, adipisci velit&#44; sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat&#46;</p>
		<h5 class="dropquote">&#8220;Everything is designed&#46; Few things are designed well&#8230;&#8221;</h5>
		
		<div class="dropsep"></div>
		
		<h6>Wanna Get in Touch&#63;</h6>
		<form>
			<input type="text" placeholder="Your Name&#46;&#46;&#46;">
			<input type="email" placeholder="Your Email&#46;&#46;&#46;">
			<textarea placeholder="Your Message&#46;&#46;&#46;"></textarea>
			<input type="submit" value="Submit &rarr;" class="dropsubmitbtn">
		</form>
		
	</div><!--container end-->

</div>

<a href="#" class="dropbtn "></a>

</div>

<div class="container">

	<img src="images/logo.png" alt="Atlas" class="logo">
	
	<h1 class="subtitle">Simply the forefront of your work&#46;&#46;&#46;showcase in style my friend&#46;</h1>
	
	<nav id="filter">
		
		</nav>
		<div class="portfolioseperator"></div>
		<div class="portfoliocontainer">
		<ul id="stage">
			<li data-tags="Web Design">
				<a href="#~009383728985"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/odesk-job.jpg" alt="" /></a>
			</li>
			<li data-tags="Logo/Branding,Print Design">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work2.png" alt="" /></a>
			</li>
			<li data-tags="Web Design,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work3.png" alt="" /></a>
			</li>
			<li data-tags="Web Design,Print Design">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work4.png" alt="" /></a>
			</li>
			<li data-tags="Logo/Branding,Video">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work5.png" alt="" /></a>
			</li>
			<li data-tags="Web Design,Video">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work6.png" alt="" /></a>
			</li>
			<li data-tags="Web Design,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work7.png" alt="" /></a>
			</li>
			<li data-tags="Print Design">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work8.png" alt="" /></a>
			</li>
			<li data-tags="Video,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work9.png" alt="" /></a>
			</li>
			<li data-tags="Web Design,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work10.png" alt="" /></a>
			</li>
			<li data-tags="Print Design,Video">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work11.png" alt="" /></a>
			</li>
			<li data-tags="Video,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work12.png" alt="" /></a>
			</li>
			<li data-tags="Video,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work13.png" alt="" /></a>
			</li>
			<li data-tags="Web Design,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work14.png" alt="" /></a>
			</li>
			<li data-tags="Print Design">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work15.png" alt="" /></a>
			</li>
			<li data-tags="Video,Logo/Branding">
				<a href="#"><span class="portfoliohover"><h1 class="porthover1">Cool Rollover Titles</h1><h1 class="porthover2">As well as some nifty sub-titles</h1></span><img src="images/portfolio/work16.png" alt="" /></a>
			</li>
		</ul>
		</div>

		<div class="footerseperator"></div>
		<footer>
			<h1>&copy; Copyright 2011 Atlas&#46;</h1>
			<h2>Atlas HTML Theme by <a href="http://purtypixels.com" title="PurtyPixels">Purty Pixels</a></h2>
			<h3>Send me a <a href="#" title="Twitter">tweet</a> or become a fan on <a href="#" title="Facebook">facebook</a></h3>
		</footer>
</div><!--container end-->

</body>
</html>